<template>
    <div class="app-container">
        <div class="main-content">
            <!-- 左栏：文章列表 -->
            <div class="left-column">
                <div v-for="(article, index) in articles" :key="'article' + index" class="card-item article-card"
                    :style="{ backgroundImage: `url(${article.imageUrl})` }">
                    <div class="content-overlay">
                        <h3 class="title">{{ article.title }}</h3>
                        <p class="text">{{ article.content }}</p>
                    </div>
                </div>
            </div>

            <!-- 右栏：景区列表 -->
            <div class="right-column">
                <div v-for="(spot, index) in spots" :key="'spot' + index" class="card-item spot-card"
                    :style="{ backgroundImage: `url(${spot.imageUrl})` }">
                    <div class="content-overlay">
                        <h3 class="title">{{ spot.name }}</h3>
                        <p class="text">{{ spot.description }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            articles: [],
            spots: [],
            loading: false
        }
    },
    methods: {
        // 加载文章数据
        loadArticles() {
            this.loading = true;
            this.$axios.get('api/articles/list', {
                params: { page: 1, pageSize: 4 }
            }).then(response => {
                if (response.data.code === 200) {
                    this.articles = response.data.data.list;
                    this.total = response.data.data.total;
                }
            }).catch(error => {
                console.error("获取数据失败", error);
            });
        },

        // 加载景区数据
        loadScenicSpots() {
            this.loading = true;
            this.$axios.get('api/scenic-spots/list', {
                params: {
                    pageSize: 4
                }
            }).then(response => {
                if (response.data.code === 200) {
                    this.spots = response.data.data.list;
                }
            }).catch(error => {
                console.error("获取景区列表失败", error);
            }).finally(() => {
                this.loading = false;
            });
        },

    },
    created() {
        this.loadScenicSpots();
        this.loadArticles();
    }

}
</script>

<style scoped>
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
}

.app-container {
    min-height: 100vh;
    padding: 1rem;
    background: #f8fafc;
}

.main-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 1rem;
    max-width: 1400px;
    margin: 0 auto;
}

/* 卡片样式优化 */
.card-item {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    min-height: 220px;
    aspect-ratio: 3/2;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    margin-bottom: 1rem;
}

.card-item:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

/* 内容遮罩优化 */
.content-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
    color: #fff;
}

.title {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.text {
    font-size: 0.88rem;
    line-height: 1.4;
    opacity: 0.9;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 特殊样式 */
.article-card .text {
    -webkit-line-clamp: 3;
}

.spot-card .text {
    font-style: italic;
    color: #e5e7eb;
}

/* 响应式优化 */
@media (max-width: 1024px) {
    .main-content {
        grid-template-columns: 1fr;
        max-width: 720px;
    }

    .card-item {
        min-height: 200px;
        aspect-ratio: 16/9;
    }

    .title {
        font-size: 1.1rem;
    }

    .text {
        font-size: 0.82rem;
    }
}

@media (max-width: 640px) {
    .app-container {
        padding: 0.8rem;
    }

    .card-item {
        min-height: 160px;
        border-radius: 8px;
        aspect-ratio: 1.5;
    }

    .content-overlay {
        padding: 0.8rem;
    }

    .title {
        font-size: 1rem;
        margin-bottom: 0.3rem;
    }

    .text {
        -webkit-line-clamp: 1;
        font-size: 0.78rem;
    }

    .article-card .text {
        -webkit-line-clamp: 2;
    }
}
</style>